<template>
  <div class="home">
    <div class="layer"></div>
    <page-scroll :footer="true">
      <template #bg>
        <div class="bg"></div>
      </template>
      <template #header>
        <gltitle
          :title="title"
          :is_name="true"
          :is_back="true"
          :is_lang="false"
          :is_kf="false"
        ></gltitle>
      </template>
      <template #content>
        <div class="container">
          <div class="tile">
            <div class="t1">{{ $t("page4.doc45") }}</div>
            <div class="t2">{{ $t("page4.doc46") }}</div>
          </div>

          <div class="fotter">
            <template v-if="urlData && urlData.length">
              <!-- Android 普通下载按钮 - 根据 type=0 的 url 显示 -->
              <button
                v-if="getUrlByType(0)?.url"
                class="btn"
                @click="beSureClick('android', 0, 'and1')"
              >
                <img src="../../assets/images/icon2.png" alt="" />
                {{ $t("page4.doc106") }}{{ $t("page4.doc47") }}
              </button>

              <!-- Android 超级下载按钮 - 根据 type=0 的 superUrl 显示 -->
              <button
                v-if="getUrlByType(0)?.superUrl"
                class="btn"
                @click="beSureClick('android', 0, 'and2')"
              >
                <img src="../../assets/images/icon3.png" alt="" />
                {{ $t("page4.doc107") }}{{ $t("page4.doc47") }}
              </button>

              <!-- iOS 普通下载按钮 - 根据 type=1 的 url 显示 -->
              <button
                v-if="getUrlByType(1)?.url"
                class="btn"
                @click="beSureClick('ios', 1, 'ios1')"
              >
                <img src="../../assets/images/icon1.png" alt="" />
                {{ $t("page4.doc108") }}{{ $t("page4.doc47") }}
              </button>

              <!-- iOS 超级下载按钮 - 根据 type=1 的 superUrl 显示 -->
              <button
                v-if="getUrlByType(1)?.superUrl"
                class="btn"
                @click="beSureClick('ios', 1, 'ios2')"
              >
                <img src="../../assets/images/icon1.png" alt="" />
                {{ $t("page4.doc109") }}{{ $t("page4.doc47") }}
              </button>
            </template>
          </div>

          <div class="text" v-if="hasAnyDownloadButton">
            {{ $t("page4.doc48") }}
          </div>
        </div>
      </template>
    </page-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$t("page.doc207"),
      urlData: [],
    };
  },
  computed: {
    // 检查是否有任何可下载按钮
    hasAnyDownloadButton() {
      return this.urlData.some((item) => item.url || item.superUrl);
    },
  },
  mounted() {
    this.getAppUrl();
  },
  methods: {
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
        urlData: [],
      });
    },

    getAppUrl() {
      this.$post(this.URL.user.version).then((res) => {
        if (res.code == 0) {
          this.urlData = res.data;
          console.log(this.urlData, "this.urlData");
        } else {
          this.$toast(res.message);
        }
      });
    },
    beSureClick(val, type, str) {
      let findVal = this.urlData.find((item) => {
        return item.type === type;
      });
      console.log(findVal, "t");

      if (val == "ios") {
        if (str == "ios1") {
          window.open(findVal.url, "_blank");
        } else {
          window.open(findVal.superUrl, "_blank");
        }
      } else {
        if (str == "and1") {
          window.open(findVal.url, "_blank");
        } else {
          window.open(findVal.superUrl, "_blank");
        }

        // window.location.href =
        //   "https://play.google.com/store/apps/details?id=com.ContiClip.ahdev";
      }
    },
    // 根据类型获取对应的下载链接数据
    getUrlByType(type) {
      return this.urlData.find((item) => item.type === type);
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background-size: 100% auto;
  min-height: 100vh;
  background: linear-gradient(
      180deg,
      rgba(21, 21, 21, 0.12) 0%,
      rgba(21, 21, 21, 0.7) 42.5%,
      rgba(21, 21, 21, 0.55) 95.5%
    ),
    url("../../assets/images/downloadBg.png") no-repeat center -0rem;
}

.tile {
  margin-bottom: 5.5rem;
}

.t2 {
  font-size: 24px;
  color: #eff0f2;
}

:deep(.content-container),
:deep(.head) {
  background: transparent !important;
}

.tile {
  color: #fff;
  text-align: center;
  font-weight: bold;
  /* Drop Shadow */
  //text-shadow: 0rem 0.04rem 0.2rem #3ba3fb;
  font-family: PangMenZhengDao;
  font-size: 0.5rem;
  font-style: normal;
  line-height: normal;
  // margin-top: 90px;

  .t1 {
    margin-top: 0.96rem;
    margin-bottom: 0.32rem;
  }
}

.fotter {
  text-align: center;
  margin-top: 50px;
  max-width: 7rem;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;

  .btn {
    color: #333;
    font-weight: 600;
    font-size: 0.28rem;
    border: 0;
    //height: 0.88rem;
    line-height: 0.32rem;
    padding: 0.25rem 0.3rem;
    border-radius: 0.14rem;
    display: flex;
    align-items: center;
    //justify-content: center;
    background: #fff !important;

    img {
      margin-right: 0.22rem;
      //height: 0.8rem;
      width: 0.4rem;
    }
  }

  .pic {
    img {
      margin-top: 0.48rem;
      height: 1.16rem;
    }
  }
}

.text {
    color: #fff;
    font-family: PingFang HK;
    font-size: 0.26rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 80%;
    margin: 30px auto 0;
  }

.layer {
  width: 100%;
  height: 4rem;
  position: fixed;
  left: auto;
  bottom: 0;
  background: rgba(7, 7, 7, 0.1);
  max-width: 10rem;
}
</style>
